/*
 * @Author: Yuelei 
 * @Date: 2018-03-19 09:40:57 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-03-19 10:18:50
 */


//  页面路由
window.location.href='http://www.baidu.com'
  //回退 
history.back();

// hash 路由
window.location='#hash'
window.onhashchange=function(){
    this.console('current hash',window.location.hash);
}

// h5路由
// 推进状态
history.pushState('name','title','/path');
// 替换状态
history.replaceState('name','title','/path');
// popstate回退
window.onpopstate=function(){
    console.log(window.location.href);
    console.log(window.location.pathname);
     console.log(window.location.hash);
}


// React-Router

import {HashRouter as Router,Route,Link,Switch} from 'react-router-dom'

class A extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return <div>
      Component A
      参数是:{this.props.match.params.id}
      <Switch>
        {/* exact完全匹配 this.props.match.path当前路径 不带参数 */}
      <Route exact path={`${this.props.match.path}`} render={(route)=>{
          return <div>当前是不带参数的a </div>
        }}
         />
          {/* exact完全匹配 this.props.match.path子路径 */}
        <Route path={`${this.props.match.path}/sub`} render={(route)=>{
          return <div>当前sub </div>
        }}
         />
           {/* exact完全匹配 this.props.match.path当前路径带参数 */}
        <Route path={`${this.props.match.path}/:id`} render={(route)=>{
          return <div>当前是带参数的a 参数是{route.match.params.id}</div>
        }}
         />
      </Switch>
      </div>
  }
}
class B extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return <div>Component B</div>
  }
}

class Wrapper extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return <div>
      <Link to='/a'>组件a</Link>
      <br/>
      <Link to='/a/123'>带参数的组件a</Link>
      <br/>
      <Link to='/b '>组件b</Link>
      <br/>
      <Link to='/a/sub '>sub</Link>
    {this.props.children}
    </div>
  }
}

ReactDOM.render(
  <Router>
    <Wrapper>
       <Route path='/a' component={A}/>
       <Route path='/b' component={B}/>
    </Wrapper>
</Router>,
  document.getElementById('app')
)
